<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?php echo $site['name'];?></title>
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  
  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '<?php echo $site['settings']['theme']['primaryColor'];?>',
            secondary: '<?php echo $site['settings']['theme']['secondaryColor'];?>',
            accent: '<?php echo $site['settings']['theme']['accentColor'];?>',
            dark: '<?php echo $site['settings']['theme']['textColor'];?>',
            light: '<?php echo $site['settings']['theme']['lightColor'];?>'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .transition-custom {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .card-hover {
        @apply hover:shadow-xl hover:-translate-y-1 transition-all duration-300;
      }
      .section-padding {
        @apply py-20;
      }
      .section-title {
        @apply text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4;
      }
      .section-subtitle {
        @apply text-dark/70 max-w-2xl mx-auto;
      }
    }
  </style>
</head>
<body class="font-inter text-dark bg-white">
  <?php foreach($components as $item){?>
  <?php echo $item;?>
  <?php }?>

  <!-- 返回顶部按钮 -->
  <button id="backToTop" class="fixed bottom-8 right-8 w-12 h-12 bg-primary text-white rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-custom z-50">
    <i class="fa fa-arrow-up"></i>
  </button>

  <!-- JavaScript -->
  <script>
    // 移动端菜单切换
    const menuBtn = document.getElementById('menuBtn');
    const mobileMenu = document.getElementById('mobileMenu');
    
    menuBtn.addEventListener('click', () => {
      mobileMenu.classList.toggle('hidden');
      if (mobileMenu.classList.contains('hidden')) {
        menuBtn.innerHTML = '<i class="fa fa-bars"></i>';
      } else {
        menuBtn.innerHTML = '<i class="fa fa-times"></i>';
      }
    });
    
    // 导航栏滚动效果
    const navbar = document.getElementById('navbar');
    window.addEventListener('scroll', () => {
      if (window.scrollY > 50) {
        navbar.classList.add('py-2', 'shadow');
        navbar.classList.remove('py-4');
      } else {
        navbar.classList.add('py-4');
        navbar.classList.remove('py-2', 'shadow');
      }
    });
    
    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        
        // 关闭移动端菜单
        if (!mobileMenu.classList.contains('hidden')) {
          mobileMenu.classList.add('hidden');
          menuBtn.innerHTML = '<i class="fa fa-bars"></i>';
        }
        
        const targetId = this.getAttribute('href');
        if (targetId === '#') return;
        
        const targetElement = document.querySelector(targetId);
        if (targetElement) {
          window.scrollTo({
            top: targetElement.offsetTop - 80,
            behavior: 'smooth'
          });
        }
      });
    });
    
    // 返回顶部按钮
    const backToTopBtn = document.getElementById('backToTop');
    
    window.addEventListener('scroll', () => {
      if (window.scrollY > 300) {
        backToTopBtn.classList.remove('opacity-0', 'invisible');
        backToTopBtn.classList.add('opacity-100', 'visible');
      } else {
        backToTopBtn.classList.add('opacity-0', 'invisible');
        backToTopBtn.classList.remove('opacity-100', 'visible');
      }
    });
    
    backToTopBtn.addEventListener('click', () => {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    });
    
    // 案例筛选
    const caseFilters = document.querySelectorAll('.case-filter');
    caseFilters.forEach(filter => {
      filter.addEventListener('click', () => {
        // 移除所有活跃状态
        caseFilters.forEach(f => {
          f.classList.remove('bg-primary', 'text-white');
          f.classList.add('bg-light', 'text-dark/70');
        });
        
        // 添加当前活跃状态
        filter.classList.remove('bg-light', 'text-dark/70');
        filter.classList.add('bg-primary', 'text-white');
        
        // 这里可以添加实际筛选逻辑
      });
    });
    
    // 数据图表
    window.addEventListener('load', () => {
      const ctx = document.getElementById('resultsChart').getContext('2d');
      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ['效率提升', '成本降低', '收入增长', '客户满意度'],
          datasets: [{
            label: '实施前后对比 (%)',
            data: [35, 22, 32, 45],
            backgroundColor: [
              'rgba(15, 82, 186, 0.7)',
              'rgba(15, 82, 186, 0.7)',
              'rgba(15, 82, 186, 0.7)',
              'rgba(15, 82, 186, 0.7)'
            ],
            borderColor: [
              'rgba(15, 82, 186, 1)',
              'rgba(15, 82, 186, 1)',
              'rgba(15, 82, 186, 1)',
              'rgba(15, 82, 186, 1)'
            ],
            borderWidth: 1
          }]
        },
        options: {
          responsive: true,
          scales: {
            y: {
              beginAtZero: true,
              ticks: {
                callback: function(value) {
                  return value + '%';
                }
              }
            }
          },
          plugins: {
            legend: {
              display: false
            }
          }
        }
      });
    });
    
    // FAQ 折叠功能
    const faqToggles = document.querySelectorAll('.faq-toggle');
    
    faqToggles.forEach(toggle => {
      toggle.addEventListener('click', () => {
        const content = toggle.nextElementSibling;
        const icon = toggle.querySelector('i');
        
        // 切换内容显示/隐藏
        content.classList.toggle('hidden');
        
        // 切换图标
        if (content.classList.contains('hidden')) {
          icon.classList.remove('fa-minus');
          icon.classList.add('fa-plus');
        } else {
          icon.classList.remove('fa-plus');
          icon.classList.add('fa-minus');
        }
      });
    });
    
    // 评分星星功能
    const ratingStars = document.querySelectorAll('.rating-stars i');
    
    ratingStars.forEach((star, index) => {
      star.addEventListener('click', () => {
        // 重置所有星星
        ratingStars.forEach(s => {
          s.classList.remove('text-yellow-400');
          s.classList.add('text-gray-300');
        });
        
        // 选中当前星星及之前的星星
        for (let i = 0; i <= index; i++) {
          ratingStars[i].classList.remove('text-gray-300');
          ratingStars[i].classList.add('text-yellow-400');
        }
      });
    });
  </script>
</body>
</html>
